<template>
	<view class="">
		<view class="mask" @touchmove.stop="" :style="{
			transform: show? 'translateX(0)': 'translateX(100vw)'
		}">
			
		</view>
		<view 	class="search-frame"
				@touchmove.stop=""
				:style="{
					width: config.width,
					height: config.height,
					borderRadius: config.borderRadius,
					right: config.right,
					padding: config.padding,
					padding: config.padding,
					backgroundColor: config.bgc
				}"
				@click="open"
		>
			<view class="search-box" v-if="show">
				<view class="x-x" @click.stop="close">
					<uv-icon name="close"></uv-icon>
				</view>
				<view class="">
					<uv-input
						placeholder="输入关键字"
						prefixIcon="search"
						color="#fff"
					></uv-input>
				</view>
				
				<scroll-view scroll-y="true" class="search-scroll">
					<view class="search-item">
						<view class="items">成女</view>
						<view class="items">萝莉</view>
						<view class="items">成男</view>
						<view class="items">正太</view>
					</view>
					<view class="search-item">
						<view class="items">写实</view>
						<view class="items">写意</view>
					</view>
				</scroll-view>
				
				<view class="">
					<uv-button type="primary">搜索</uv-button>
				</view>
			</view>
			<view class="suspend" v-else>
				<uv-icon name="search" color="#fff" size="22"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					width: '100rpx',
					height: '100rpx',
					borderRadius: '50%',
					right: '0px',
					padding: '0',
					bgc: ''
				},
				show: false
			}
		},
		mounted() {
		},
		methods: {
			open() {
				this.config.height = '50vh'
				this.config.borderRadius = '10px'
				this.config.padding = '30rpx'
				this.show = true
				this.config.bgc = '#333'
				setTimeout(() => {
					this.config.width = 'calc(100vw - 120rpx)'
					this.config.right = '30rpx'
				}, 300)
			},
			close() {
				this.config.width = '100rpx'
				this.config.right = '0px'
				setTimeout(() => {
					this.config.height = '100rpx'
					this.config.width = '100rpx'
					this.config.padding = '0'
					this.config.bgc = '#00000000'
					this.show = false
					setTimeout(() => {
						this.config.borderRadius = '50%'
					}, 300)
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		transform: translateX(100vw);
	}
	.search-frame {
		background-color: #fff;
		position: fixed;
		top: 50%;
		transform: translate(0, -50%);
		transition: all .3s;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		.search-box {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: calc(100vw - 120rpx);
			height: calc(100% - 60rpx);
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.x-x {
				position: absolute;
				right: 0;
				top: 0;
				width: 36px;
				height: 36px;
				border-radius: 50%;
				border: 1px solid #eee;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				z-index: 101;
			}
			.search-scroll {
				height: calc(100% - 80px);
				.search-item {
					display: grid;
					gap: 30rpx;
					grid-template-columns: repeat(2, 1fr);
					border-bottom: 1px solid #fff;
					padding: 30rpx 0;
					.items {
						background-color: #fff;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 34px;
						font-size: 14px;
					}
				}
			}
		}
	}
	
	.suspend {
		background: linear-gradient(to top right, #3c9cff, #00b26a);
		width: 100%;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}
</style>
